<template>
    <div class="container">
        <div class="header f-fx" @click="setFull">
            <div class="left">
                <div class="static f-fx">
                    <img :src="weatherImg" class="weather" alt="">
                    <div class="temperature">8~13℃ 阴</div>
                    <div class="line"></div>
                    <div class="">空气质量：良</div>
                </div>
            </div>
            <div class="f-pr header-bg">
                <div class="title"></div>
                <div class="left-san"></div>
                <div class="right-san"></div>
            </div>
            <div class="left">
                <div class="static static2 f-fx">
                    <div class="">{{ timeList.time }}</div>
                    <div class="line"></div>
                    <div class="temperature">{{ timeList.today }}&nbsp; {{ timeList.week }} </div>
                </div>
            </div>
        </div>
        <div class="steps">
            <swiper class="swiper-container" :slides-per-view="5" :space-between="30" @swiper="onSwiper"
                @slideChange="onSlideChange" :modules="modules" :pagination="{ clickable: true }" :autoplay="{
                    delay: 2000,
                    disableOnInteraction: false,
                }" :observer="true" :observeParents="true" :loop="true" @mouseenter="pauseSwiper"
                @mouseleave="resumeSwiper">
                <swiper-slide v-for="(item, index) in steps" :key="index">
                    <svg id="svg-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="685.00048828125" height="479" viewBox="0 0 685.00048828125 479" fill="none">
                        <path class="svg-slide"
                            d="M0.5 451.5L1.5 14L22 0.5L294.5 0.5L322.5 36L660.5 35L684.5 59.5L683.5 455.5L661 478.5L120 478.5">
                        </path>
                    </svg>
                    <div class="slide-item" :class="{ 'slide-item2': item.name == '打印' }">
                        <div class="title">{{ item.name + "环节" }}</div>
                        <div class="f-fx label-box">
                            <span>{{ item.label }}</span>
                            <span>已完成：<i class="font-num">{{ item.prosess + "%" }}</i></span>
                        </div>
                        <div class="progress">
                            <div class="progress-bg"></div>
                            <div class="over">
                                <div class="over3"></div>
                                <div class="over2"></div>
                                <div class="over1"></div>
                            </div>
                        </div>
                        <div class="f-fx">
                            <div class="do-num">
                                <div class="num font-num">{{ item.doNum }} <span>单</span></div>
                                <div class='text' :style="{ width: item.prosess + `%` }">已经{{ item.name }}</div>
                            </div>
                            <div class="do-num">
                                <div class="num  font-num" :calss="{ 'num-2': index == 1 }">{{ item.todoNum }}
                                    <span class="white">单</span>
                                </div>
                                <!-- <div class='text'>{{ index > 2 ? "已" + item.name : "待" + item.name }} -->
                                <div class='text'>{{ "待" + item.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
            <div class="custom-navigation">
                <img src="@/assets/images/bigScreen/btn-left.png" class="custom-swiper-button-prev" @click="goPrev">
                <img src="@/assets/images/bigScreen/btn-right.png" class="custom-swiper-button-next" @click="goNext">
            </div>
        </div>
        <div class="content f-fx">
            <div class="left">
                <div class="title title1">
                    <div class="circle-yuan"></div>
                </div>
                <div class="f-fx today-fx-num">
                    <div class="li f-pr">
                        <div class="bg2"></div>
                        <div class="f-title">今日已接单
                        </div>
                        <div class="des font-num">455 <span class="white">单</span></div>
                    </div>
                    <div class="li f-pr">
                        <div class="bg2"></div>
                        <div class="f-title">未处理订单
                        </div>
                        <div class="des font-num">455 <span class="white">单</span></div>
                    </div>
                </div>
                <div class="columnar" id="columnar" ref="columnarDom"></div>
                <div class="title title2">
                    <div class="circle-yuan2"></div>
                </div>
                <div class="f-fx">
                    <div class="pie-box">
                        <div class="pie" id="pie" ref="pieDom"></div>
                    </div>
                    <div class="pie-legend">
                        <ul>
                            <li v-for="(item, index) in pieData" :key="index">
                                <div class="p-title f-fx"><i
                                        :style="{ 'background': item.color, 'box-shadow': '0 0  2px 2px ' + item.shadow }"></i>{{
                                            item.name }}</div>
                                <div class="f-fx p-num">
                                    <span class="num"><em class="font-num" :class="'color' + index">{{ item.value
                                    }}</em> 单</span>
                                    <span class="percentage font-num">{{ (item.value / totalPie * 100).toFixed(2) + "%"
                                    }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="total-box">
                    <div class="circle"></div>
                    <div class="t-title t-title1"></div>
                    <ul>
                        <li class="point" :class="`point` + index" v-for="(item, index) in totalData" :key="index">
                            <i class="pointImg" :class="`pointImg` + index"></i>
                            <i class="point-title"> {{ item.name }}</i><span class="font-num"
                                :class="{ 'green': index < 4, 'yellow': index > 3 }">{{ item.num }}</span><i
                                class="white">{{
                                    item.unit }}</i>
                        </li>
                    </ul>
                </div>
                <div class="wave-box">
                    <div class="t-title t-title2"></div>
                    <div class="wave" id="wave" ref="waveDom"></div>
                </div>
            </div>
            <div class="right">
                <div class="title  title2">
                    <div class="circle-yuan"></div>
                </div>
                <div class="s-title">工单进度</div>
                <el-table ref="myTable" id="tab1" class="table-box my-custom-table" :cell-style="tableCellStyle"
                    :data="processList" table-layout="auto" height="216px">
                    <el-table-column label="" align="center" prop="platform" width="50">
                        <template #default="scope">
                            <img class="img"
                                :src="scope.row.platform == 1 ? icon1 : scope.row.platform == 2 ? icon2 : icon3" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="时间" align="center" prop="time" />
                    <el-table-column label="订单编号" align="center" prop="num" />
                    <el-table-column label="客户名称" align="center" prop="name" show-overflow-tooltip width="85" />
                    <el-table-column label="当前阶段" align="center" prop="type" />
                    <el-table-column label="状态" align="center" prop="status" width='70'>
                        <template #default="scope">
                            <div :class="'status' + scope.row.status">
                                {{ scope.row.status == 1 ? "正常" : "异常" }}</div>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="s-title">实时预警</div>
                <div class="f-fx">
                    <div class="f-title">
                        <span class="total">超时订单总数 <span class="colorYellow">5900</span> 单</span>
                        <span class="des">打印超时订单数:<i class="font-num">5900</i>单</span>
                    </div>
                </div>
                <el-table ref="myTable2" id="tab2" class="table-box my-custom-table" :cell-style="tableCellStyle2"
                    :data="processList2" table-layout="auto" height="216px">
                    <el-table-column label="订单编号" align="center" prop="orderNum" />
                    <el-table-column label="当前阶段" align="center" prop="type" />
                    <el-table-column label="已超时分总数" align="center" prop="time" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getScreen } from '@/api/factory/screen/index';
import { ref, onMounted, onBeforeUnmount, computed, nextTick, onUnmounted, shallowRef } from 'vue';
import { useNowTime, getLastDays, formatCurrency } from './../hooks/useCommon'
import * as echarts from 'echarts';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y, Autoplay } from 'swiper/modules';
// import $ from 'jquery';
import autofit from "autofit.js"
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/autoplay';
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

import weatherImg from '@/assets/images/bigScreen/weather.png';

const timer = ref(null) as any;
const timeList = ref({}) as any;
onMounted(() => {
    autofit.init({
        dh: 1080,
        dw: 1920,
        el: "#app",
        resize: true
    },
        false
    )
    timeList.value = useNowTime();
    timer.value = setInterval(() => {
        timeList.value = useNowTime()
    }, 1000)

    // // 获取柱状图
    getColumar();

    // // 饼图
    getInitPie();

    // 波线图
    getWave();

    // table滚动
    createScroll();
    createScroll2();

    // swiper path
    // var svg = document.getElementById('svg-box'); // 确保你的SVG有一个ID
    // var path = svg.querySelector('path'); // 或者直接使用pathElement作为选择器
    // // 使用SVG的getTotalLength方法获取总长度
    // console.log(path.getTotalLength())


    // table 鼠标滑进滑出
    setTabsHover()

    if (route.query.key) {
        const data = extractIpFirstNumber(window.location.href);
        getScreen({
            tenantId: data.queryParams.tenentID ? data.queryParams.tenentID : data.queryParams.tenant, //data.tenant ? data.tenant : '',
            tenantCode: data.domainPrefix
        }).then(response => {
            if (response.code == 200 && response.data == route.query.key) {
                // timeList.value = useNowTime();
                // timer.value = setInterval(() => {
                //     timeList.value = useNowTime()
                // }, 1000)

                // // // 获取柱状图
                // getColumar();

                // // // 饼图
                // getInitPie();

                // // 波线图
                // getWave();

                // // table滚动
                // createScroll();
                // createScroll2();

                // // swiper path
                // // var svg = document.getElementById('svg-box'); // 确保你的SVG有一个ID
                // // var path = svg.querySelector('path'); // 或者直接使用pathElement作为选择器
                // // // 使用SVG的getTotalLength方法获取总长度
                // // console.log(path.getTotalLength())

                // var svg = document.getElementById('svg2');
                // var path = svg.querySelector('path');
                // console.log(path.getTotalLength())

                // // table 鼠标滑进滑出
                // setTabsHover()
            } else {
                router.replace("/401")
            }
        });
    } else {
        router.replace("/401")
    }
})

const setTabsHover = () => {
    let tab1 = document.getElementById("tab1");
    let tab2 = document.getElementById("tab2");

    tab1.addEventListener('mouseenter', e => {
        createScroll(1)
    })
    tab1.addEventListener('mouseleave', e => {
        createScroll()
    })

    tab2.addEventListener('mouseenter', e => {
        createScroll2(1)
    })

    tab2.addEventListener('mouseleave', e => {
        createScroll2()
    })
}

onBeforeUnmount(() => {
    autofit.off()
})

// 关闭页面销毁定时器
onUnmounted(() => {
    clearScroll();
})

const clearScroll = (num) => {
    if (num == 1) {
        clearInterval(tableTimer.value)

    } else if (num == 2) {
        clearInterval(tableTimer2.value)

    } else {
        clearInterval(tableTimer.value)
        clearInterval(tableTimer2.value)

    }
}

const steps: any = ref([{
    name: "设计",
    label: "今日进度",
    num: '96',
    doNum: 233,
    todoNum: 6,

},
{
    name: "打印",
    label: "今日进度",
    doNum: 233,
    todoNum: 6,


},
{
    name: "校对",
    label: "今日进度",
    doNum: 233,
    todoNum: 6,
},
{
    name: "激光",
    label: "激光进度",
    doNum: 233,
    todoNum: 6,


},
{
    name: "车缝",
    label: "车缝进度",
    doNum: 233,
    todoNum: 6,


},
{
    name: "发货",
    label: "发货进度",
    doNum: 233,
    todoNum: 6,
}
])
steps.value.forEach(item => {
    item.prosess = (item.doNum / (item.doNum + item.todoNum) * 100).toFixed(2)
})

const modules = [Navigation, Pagination, A11y, Autoplay]
const swiperInstance = ref<typeof Swiper | null>(null);

const onSwiper = (swiper: typeof Swiper) => {
    swiperInstance.value = swiper;
};
const onSlideChange = () => {
    // console.log('slide change');
};

const pauseSwiper = () => {
    if (swiperInstance.value) {
        swiperInstance.value.autoplay.stop();
    }
};
const resumeSwiper = () => {
    if (swiperInstance.value) {
        swiperInstance.value.autoplay.start();
    }
};
const goPrev = () => {
    if (swiperInstance.value) {
        swiperInstance.value.slidePrev();
    }
};
const goNext = () => {
    if (swiperInstance.value) {
        swiperInstance.value.slideNext();
    }
};
const baseUrl =
    import.meta.env.VITE_APP_BASE_API;

function extractIpFirstNumber(url) {
    const urlObj = new URL(url);
    // 使用正则表达式匹配IP地址的第一个数字
    const ipPattern = /:\/\/([^\/:]+)(?=\:|$)/;
    const match = url.match(ipPattern);
    let domainPrefix = url.split('//')[1].split('.')[0];
    const queryParams = {};
    urlObj.searchParams.forEach((value, key) => {
        queryParams[key] = value;
    });
    console.log(domainPrefix)
    // 返回解析结果
    return {
        domainPrefix: domainPrefix,
        baseURL: `http://${domainPrefix}.${baseUrl.split('http://')[1]}`,
        queryParams: queryParams
    };
}


// 柱状图
const columnarDom = ref(null);
const days = getLastDays(7);
days.sort();
const columnarArr = ref([]) as any;
const numTotalArr = ref([]) as any;
const numTotalArrNew = ref([]) as any;
days.forEach(item => {
    columnarArr.value.push(Math.floor(Math.random() * 200) + Math.floor(Math.random() * 200))
})
numTotalArr.value = JSON.parse(JSON.stringify(columnarArr.value));
const maxNum = Math.max.apply(null, numTotalArr.value);
const maxNumNEW = Math.ceil(maxNum / 5);
const maxNumNEW2 = Math.ceil(maxNumNEW / 100) * 100;
days.forEach(item => {
    numTotalArrNew.value.push(maxNumNEW2 * 5)
})
var getSymbolData = (data) => {
    let arr = [] as any;
    for (var i = 0; i < data.length; i++) {
        arr.push({
            value: data[i],
            symbolPosition: 'end',
        });
    }
    return arr
};
const usedmemoryInstance = shallowRef();
const getColumar = () => {
    usedmemoryInstance.value = echarts.init(columnarDom.value);
    usedmemoryInstance.value.setOption({
        grid: {
            left: "10",
            right: "20",
            top: "10",
            bottom: '0',
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: "axis",
            renderMode: "html",
            className: "bar-tooltip",
            formatter: function (params) {
                let res = "";
                for (var i = 0; i < params.length; i++) {
                    if (params[i].seriesName != 'test') {
                        res += `<div class="tooltip-shadow"><div class="formatter">
                  <i>${params[i].seriesName}</i>  &nbsp;&nbsp;&nbsp;
                  <span>${params[i].data}&nbsp;</span>笔
                  </div></div>`;
                    }

                }
                return res;
            },
            axisPointer: {
                type: 'none'
            },
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            name: 'test',
            type: 'bar',
            boundaryGap: false,
            animationDuration: 0, //关键代码  初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
            animationDurationUpdate: 0, //关键代码  数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(1, 58, 128, 0.48)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(1, 58, 128, 0)' // 100% 处的颜
                    }],
                    global: false // 缺省为 false
                },
            },
            emphasis: {
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(8, 94, 199, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(8, 94, 199, 0)' // 100% 处的颜
                        }],
                        global: false // 缺省为 false
                    }
                }

            },
            data: numTotalArrNew.value,
            barWidth: 22,
            barGap: "-70%",
            z: 1, //层级问题，加上嗯，这个必须加嗯，
        },
        {
            name: 'test',
            type: 'pictorialBar',
            symbolSize: [18, 3],
            symbolOffset: [2, -3],
            symbol: 'Circle',
            z: 10,
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                normal: {
                    color: '#fff',
                },
            },
            data: getSymbolData(numTotalArr.value),

        },
        {
            name: "当日订单数",
            type: "bar",
            data: columnarArr.value,
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: 8,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#00feff",
                },
                {
                    offset: 1,
                    color: "#0286ff",
                },
                ]),
            },
        },
        ],
        xAxis: {
            type: 'category',
            data: days,
            min: 0,
            axisTick: {
                show: false, // 不显示坐标轴刻度线
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                color: '#eee', // 设置 x 轴文字颜色
                interval: 0,
                margin: 8

            },
            axisLine: {
                show: true,
                z: 10,
                lineStyle: {
                    type: "solid",
                    color: "rgba(127, 214, 255, .15)",
                }
            },

        },
        yAxis: {
            type: 'value',
            min: 0,
            splitNumber: 5,
            axisTick: {
                show: false // 不显示坐标轴刻度线
            },
            axisLabel: {
                show: true, // 不显示坐标轴上的文字
                color: '#fff', // 设置 x 轴文字颜色
                interval: 0,
                margin: 14

            },
            axisLine: {
                show: false,
                z: 1,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "rgba(127, 214, 255, .1)"
                },
                z: 1
            }
        },
    });
    startAutoHighlight();
    nextTick(() => {
        initColumnar();
    })
}

// 饼图
const pieDom = ref(null);
const pieData = [{
    name: '平台订单',
    value: 857,
    color: 'rgba(43, 179, 254, 1)',
    shadow: 'rgba(43, 179, 254, 0.3)'
},
{
    name: '电商订单',
    value: 457,
    color: 'rgba(254, 200, 101, 1)',
    shadow: 'rgba(254, 200, 101, 0.3)'
},
{
    name: '其他订单',
    value: 247,
    color: 'rgba(55, 255, 163, 1)',
    shadow: 'rgba(55, 255, 163, 0.3)'
}
]
const totalPie = ref(0);
for (var i = 0; i < 3; i++) {
    totalPie.value += pieData[i].value
}
import imgSrc from '@/assets/images/bigScreen/pie-bg.png';
const colorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: "rgba(47, 123, 253, 1)",
    },
    {
        offset: 1,
        color: "rgba(40, 239, 255, 1)",
    },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: "rgba(255, 164, 21, 1)",
    },
    {
        offset: 1,
        color: "rgba(252, 212, 95, 1)",
    },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: "rgba(55, 255, 163, 1)",
    },
    {
        offset: 1,
        color: "rgba(55, 255, 163, 1)",
    },
    ])
];
const angle = ref(360);
const intervalId3 = ref();
const usedPieInstance = shallowRef();
const option = ref()
const getInitPie = () => {
    usedPieInstance.value = echarts.init(pieDom.value);
    option.value = {
        title: {
            show: true,
            text: '招标\n方式',
            x: 'center',
            y: 'center',
            textStyle: {
                color: "#fff",
                fontSize: 16,
                lineHeight: 18
            }
        },
        graphic: {
            elements: [{
                type: "image",
                z: -10,
                id: 'rotating-background',
                left: 'center',
                top: 'center',
                style: {
                    image: imgSrc,
                    width: 194,
                    height: 194,
                },
                rotation: angle.value // 初始旋转角度
            },],
        },
        color: colorList,
        series: [
            // 展示层
            {
                type: 'pie',
                radius: ["60%", "80%"],
                center: ['50%', '50%'],
                label: {
                    show: false
                },
                data: pieData,
                silent: true,
                z: 21,
                itemStyle: {
                    normal: {
                        borderColor: "rgb(1,21,56)",
                        borderWidth: 4,
                    }
                }
            },
        ],
    };
    usedPieInstance.value.setOption(option.value);
    setTimeout(function () {
        startAutoPie()
        initPie()
    }, 1000)

}

// 饼图转圈  
function startAutoPie() {

    intervalId3.value = setInterval(() => {
        draw(usedPieInstance.value, option.value)
    }, 100)
}

function stopAutoPie() {
    clearInterval(intervalId3.value);
    intervalId3.value = "";
}

function initPie() {
    let columnarId = document.getElementById("pie");
    // 添加鼠标悬停事件监听器（可选）
    columnarId.addEventListener('mouseover', (params) => {
        console.log(111111)
        stopAutoPie();
    });

    // 添加鼠标移开事件监听器（可选）
    columnarId.addEventListener('mouseout', () => {
        console.log(4444)
        startAutoPie();
    });
}


function draw(usedPieInstance, option) {
    angle.value -= Math.PI / 90;
    usedPieInstance.setOption({
        graphic: {
            elements: [{
                id: 'rotating-background',
                rotation: angle.value
            }]
        }
    });

}


// 总量统计
const totalData = [{
    name: "今日打印长度",
    num: 5903,
    unit: "m",
}, {
    name: "今日订单数量",
    num: 590,
    unit: "单"
}, {
    name: "今年打印长度",
    num: 590093,
    unit: "m"
}, {
    name: "今年订单数量",
    num: 5900,
    unit: "单"
}, {
    name: "总打印长度",
    num: 987644477,
    unit: "m"
}, {
    name: "总订单数量",
    num: 559608,
    unit: "单"
}]

const waveDom = ref(null);
const waveData = ref([]) as any;
const waveData2 = ref([]) as any;
const numTotalArrWaveNew = ref([]) as any;

const daysWave = getLastDays(14);
daysWave.sort();
daysWave.forEach(item => {
    waveData.value.push(Math.floor(Math.random() * 800))
    waveData2.value.push(Math.floor(Math.random() * 600))
})

const maxWaveNum = Math.max.apply(null, waveData.value);
const maxWaveNumNEW = Math.ceil(maxWaveNum / 5);
const maxWaveNumNEW2 = Math.ceil(maxWaveNumNEW / 100) * 100;
daysWave.forEach(item => {
    numTotalArrWaveNew.value.push(maxWaveNumNEW2 * 5)
})
console.log(22, numTotalArrWaveNew.value)
const usedWaveInstance = shallowRef();
const getWave = () => {
    usedWaveInstance.value = echarts.init(waveDom.value);
    usedWaveInstance.value.setOption({
        grid: {
            left: "0",
            right: "0",
            top: "60",
            bottom: "0",
            containLabel: true
        },
        legend: {
            itemWidth: 14,
            itemHeight: 6,
            itemGap: 20,
            right: "auto",
            top: "20",
            textStyle: {
                fontSize: "14px",
                color: "#fff",
            },
            data: [{
                icon: "image://",
                name: "日完成订单数"
            }, {
                icon: 'image://',
                name: '日打印长度'
            }]
        },
        color: ["#2EDAFF", '#FCD45F'],
        tooltip: {
            show: true,
            trigger: "axis",
            renderMode: "html",
            className: "bar-tooltip",
            padding: [5, 10],
            formatter: function (params) {
                let res = '<div class="tooltip-shadow">';
                for (var i = 0; i < params.length; i++) {
                    if (params[i].seriesName != 'test') {
                        res += `<div class="formatter">
                  <i>${params[i].seriesName}</i>  &nbsp;&nbsp;&nbsp;
                  <span>${params[i].data}&nbsp;</span>笔
                  </div>`;
                    }

                }
                return res + '</div>';
            },
            axisPointer: {
                type: 'none'
            },
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            name: 'test',
            type: 'bar',
            boundaryGap: false,
            animationDuration: 0, //关键代码  初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
            animationDurationUpdate: 0, //关键代码  数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(1, 58, 128, 0.48)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(1, 58, 128, 0)' // 100% 处的颜
                    }],
                    global: false // 缺省为 false
                },
            },
            emphasis: {
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(8, 94, 199, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(8, 94, 199, 0)' // 100% 处的颜
                        }],
                        global: false // 缺省为 false
                    }
                }

            },
            data: numTotalArrWaveNew.value,
            barWidth: 28,
            z: 1, //层级问题，加上嗯，这个必须加嗯，
        },
        {
            name: "日完成订单数",
            type: "line",
            showSymbol: false,
            smooth: true,
            symbol: "circle",
            // symbol: 'image://',
            symbolSize: 10,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                            offset: 0,
                            color: "rgba(46, 218, 255, 0.8)",
                        },
                        {
                            offset: 1,
                            color: "rgba(46, 218, 255, 0.1)",
                        },
                    ],
                        false
                    ),
                    shadowColor: "rgba(46, 218, 255, 0.1)",
                    shadowBlur: 10
                },
            },
            data: waveData.value,
        },
        {
            name: "日打印长度",
            type: "line",
            showSymbol: false,
            smooth: true,
            symbolSize: 10,
            symbol: "circle",
            // symbol: 'image://',
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                            offset: 0,
                            color: "rgba(252, 212, 95, 0.8)",
                        },
                        {
                            offset: 0.2,
                            color: "rgba(252, 212, 95, 0.1)",
                        },
                    ],
                        false
                    ),
                    shadowColor: "rgba(51, 162, 240, 0.1)",
                    shadowBlur: 10
                },
            },
            data: waveData2.value,
        },
        ],
        xAxis: {
            type: 'category',
            data: daysWave,
            boundaryGap: ["1", "1"],
            axisTick: {
                show: false, // 不显示坐标轴刻度线
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                color: '#fff', // 设置 x 轴文字颜色
                interval: 0,
                margin: 10

            },
            axisLine: {
                show: true,
                z: 10,
                lineStyle: {
                    type: "solid",
                    color: "rgba(127, 214, 255, .15)",
                }
            },
        },
        yAxis: {
            type: 'value',
            boundaryGap: ["1", "1"],
            axisTick: {
                show: false, // 不显示坐标轴刻度线
            },
            min: 0,
            max: 1000,
            splitNumber: 5,
            axisLabel: {
                show: true, // 不显示坐标轴上的文字
                color: '#fff',
                fontSize: '14px',
            },
            axisLine: {
                show: false,
                z: 2,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 0.8,
                    color: "rgba(127, 214, 255, .1)",
                    type: "dashed",
                },
            },
        },
    });
    startAutoHighlight2();
    nextTick(() => {
        initColumnar2();
    })
}

// 工单进度
import icon1 from '@/assets/images/bigScreen/icon1.png';
import icon2 from '@/assets/images/bigScreen/icon3.png';
import icon3 from '@/assets/images/bigScreen/icon3.png';
const processList = [{
    time: "15:40:31",
    num: "A20241001",
    name: "客户名称嘻嘻嘻",
    type: "打印",
    status: 1,
    platform: 1
},
{
    time: "15:40:31",
    num: "A20241001",
    name: "客户名称嘻嘻嘻",
    type: "打印",
    status: 2,
    platform: 2
},
{
    time: "15:40:31",
    num: "A20241001",
    name: "客户名称嘻嘻嘻",
    type: "打印",
    status: 1,
    platform: 3
},
{
    time: "15:40:31",
    num: "A20241001",
    name: "客户名称嘻嘻嘻",
    type: "打印",
    status: 1,
    platform: 2
},
{
    time: "15:40:31",
    num: "A20241001",
    name: "客户名称嘻嘻嘻",
    type: "打印",
    status: 1,
    platform: 2
}, ,
{
    time: "15:40:31",
    num: "A20241004",
    name: "客户名称嘻嘻嘻",
    type: "打印",
    status: 1,
    platform: 2
},

]

const processList2 = [{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
{
    orderNum: "A2024",
    type: "打印",
    time: "62分钟"
},
];
// table滚动
let tableTimer = ref(null);
let myTable = ref(null)
const createScroll = (stop) => {
    if (stop) {
        clearScroll(1)
        return;
    }
    // 拿到 table
    const table = myTable.value.layout.table.refs
    // 拿到可以滚动的元素
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
    tableTimer.value = setInterval(() => {
        tableWrapper.scrollTop += 1
        // console.log(tableWrapper.scrollHeight)

        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
            // tableData.value = [...tableData.value, ...tableData.value]
            tableWrapper.scrollTop = 0
        }
    }, 50)
}

let tableTimer2 = ref(null);
let myTable2 = ref(null)
const createScroll2 = (stop) => {
    if (stop) {
        clearScroll(2)
        return false;
    }
    // 拿到 table
    const table = myTable2.value.layout.table.refs
    // 拿到可以滚动的元素
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
    tableTimer2.value = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
            // tableData.value = [...tableData.value, ...tableData.value]
            tableWrapper.scrollTop = 0
        }
    }, 50)
}
// table添加border
const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (rowIndex % 2 == 1) {
        if (columnIndex == 0) {
            return { 'border': '1px solid rgba(24, 107, 219, 1)', 'border-right': "none" }
        } else if (columnIndex == processList.length) {
            return { 'border': '1px solid rgba(24, 107, 219, 1)', 'border-left': "none" }
        } else {
            return { 'border-top': '1px solid rgba(24, 107, 219, 1)', 'border-bottom': '1px solid rgba(24, 107, 219, 1)' }
        }
    }

}

const tableCellStyle2 = ({ row, column, rowIndex, columnIndex }) => {
    if (rowIndex % 2 == 1) {
        if (columnIndex == 0) {
            return { 'border': '1px solid rgba(24, 107, 219, 1)', 'border-right': "none" }
        } else if (columnIndex == processList2.length) {
            return { 'border': '1px solid rgba(24, 107, 219, 1)', 'border-left': "none" }
        } else {
            return { 'border-top': '1px solid rgba(24, 107, 219, 1)', 'border-bottom': '1px solid rgba(24, 107, 219, 1)' }
        }
    }

}

// 全屏
const isFullScreen = ref(false);
const setFull = () => {
    if (!document.fullscreenElement && !isFullScreen.value) {
        // 进入全屏
        document.documentElement.requestFullscreen().then(() => {
            isFullScreen.value = true;
        });
    }
}

// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
    isFullScreen.value = !!document.fullscreenElement;
});

// 柱状图轮播
let currentIndex = 0; // 当前高亮的数据项索引
const dataLength = days.length; // 获取数
const intervalId = ref();

function startAutoHighlight() {
    // 设置定时器，每隔1秒切换一次高亮项
    intervalId.value = setInterval(() => {
        // 取消之前的高亮项（如果需要）
        usedmemoryInstance.value.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex // 处理索引超出范围的情况
        });

        // 高亮当前项
        usedmemoryInstance.value.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });

        // 更新当前索引
        currentIndex = (currentIndex + 1) % dataLength;
    }, 1000);
}

function stopAutoHighlight() {
    clearInterval(intervalId.value);
}

function initColumnar() {
    let columnarId = document.getElementById("columnar");
    // 添加鼠标悬停事件监听器（可选）
    columnarId.addEventListener('mouseover', (params) => {
        console.log("jinru")
        stopAutoHighlight();
    });

    // 添加鼠标移开事件监听器（可选）
    columnarId.addEventListener('mouseout', () => {
        console.log("离开")
        startAutoHighlight();
    });
}

// 折线图轮播
const intervalId2 = ref();
let currentIndex2 = 0; // 当前高亮的数据项索引
function startAutoHighlight2() {
    // 设置定时器，每隔1秒切换一次高亮项
    intervalId2.value = setInterval(() => {
        // 高亮当前项
        usedWaveInstance.value.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex2
        });

        // 更新当前索引
        currentIndex2 = (currentIndex2 + 1) % waveData.value.length;
    }, 1000);
}

function stopAutoHighlight2() {
    clearInterval(intervalId2.value);
}

function initColumnar2() {
    let columnarId = document.getElementById("wave");
    // 添加鼠标悬停事件监听器（可选）
    columnarId.addEventListener('mouseover', (params) => {
        stopAutoHighlight2();
    });

    // 添加鼠标移开事件监听器（可选）
    columnarId.addEventListener('mouseout', () => {
        console.log("离开")
        startAutoHighlight2();
    });
}
</script>

<style lang="scss" scoped>
/*字体*/

@font-face {
    font-family: 'DIN';
    src: url("./../../assets/fonts/DIN-Medium-2.otf");
}

.DIN {
    font-family: 'DIN';
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url("./../../assets/fonts/BarlowCondensed.ttf") format('truetype');
}

.container {
    width: 1920px;
    height: 1080px;
    background: url('@/assets/images/bigScreen/bg2.png') no-repeat;
    background-size: 100% auto;
    color: #fff;
    font-size: 13px;
    padding: 0 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;

    .f-fx {
        display: flex;
    }

    .font-num {
        font-family: "Barlow Condensed";
    }

    .header {
        width: 100%;
        height: 110px;
        background: url('@/assets/images/bigScreen/topbg.png') no-repeat;
        background-size: 100% auto;
        justify-content: space-between;
        padding: 0 12px;
        position: relative;

        .header-bg {
            flex: 1;
        }

        .title {
            width: 600px;
            height: 54px;
            background: url('@/assets/images/bigScreen/toptitle.png') no-repeat;
            background-size: 100% auto;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -35px;
            margin-left: -296px;
        }

        .left-san {
            width: 70px;
            height: 26px;
            background-image: url('@/assets/images/bigScreen/san3.png'), url('@/assets/images/bigScreen/san2.png'), url('@/assets/images/bigScreen/san1.png');
            background-size: 15px, 20px, 22px;
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: left center, center center, right center;
            /* 初始位置 */
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -32px;
            animation: ani-show 2s infinite linear;
        }

        .right-san {
            width: 70px;
            height: 26px;
            background-image: url('@/assets/images/bigScreen/san3.png'), url('@/assets/images/bigScreen/san2.png'), url('@/assets/images/bigScreen/san1.png');
            background-size: 15px, 20px, 22px;
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: left center, center center, right center;
            transform: rotate(180deg);
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -32px;
            animation: ani-show2 2s infinite linear;
        }

        .left {
            padding-top: 30px;
            width: 532px;

            .static {
                line-height: 20px;
                color: #ffffff;
                text-align: center;
                font-size: 20px;

                .weather {
                    width: 16px;
                    height: 16px;
                    margin-right: 6px;
                }

                .line {
                    width: 1px;
                    margin: 0 10px 0 8px;
                    background: url('@/assets/images/bigScreen/icon-line.jpg') center center no-repeat;
                    background-size: 100% auto;
                }
            }

            .static2 {
                flex-direction: row-reverse;
            }
        }
    }

    .steps {
        position: relative;
        padding: 0 20px;

        .swiper-container {
            width: 100%;

            .swiper-slide {
                width: 100%;
                display: flex;
                justify-content: left;
                align-items: center;
            }

            .slide-item {
                width: 100%;
                background: url('@/assets/images/bigScreen/tj-bg.png') no-repeat;
                background-size: contain;
                padding: 12px 11px 20px 24px;
                position: relative;

                .title {
                    font-size: 27px;
                    line-height: 45px;
                    font-weight: bold;
                }
            }

            .label-box {
                justify-content: space-between;
                align-items: end;

                span {
                    font-size: 15px;
                    margin-left: 3px;
                    line-height: 50px;

                    &:last-child {
                        line-height: 17px;
                        font-size: 12px;
                    }

                    i {
                        font-size: 26px;
                        line-height: 60px;
                        color: #12FFFC;
                    }
                }
            }

            .progress {
                width: 95%;
                height: 16px;
                border: 1px solid rgba(29, 146, 255, 1);
                border-radius: 8px;
                background-size: 10px 10px;
                position: relative;
                background-color: rgba(3, 33, 51, 0.5);
                margin-bottom: 10px;

                .progress-bg {
                    width: calc(100% - 4px);
                    position: absolute;
                    height: 12px;
                    top: 2px;
                    left: 2px;
                    background: rgba(7, 87, 186, 0.18);
                    border-radius: 6px;
                    z-index: 1;
                }

                .over3 {
                    width: 100%;
                    height: 9px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: linear-gradient(45deg, rgba(27, 125, 255, 1), rgba(18, 238, 252, 1));
                }

                .over2 {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 9px;
                    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
                    background-repeat: repeat-x;
                    background-size: 16px 16px;
                    animation: progress-scroll 2s infinite linear;
                }

                .over {
                    width: 60%;
                    height: 9px;
                    top: 3.5px;
                    left: 6px;
                    position: absolute;
                    transition: width 0.5s ease;
                    border-radius: 5px;
                    overflow: hidden; // background: #fff;
                }

                .over1 {
                    width: 100%;
                    position: absolute;
                    top: 4.5px;
                    left: 0;
                    height: 9px;
                    background-color: rgba(255, 255, 255, .2);
                }
            }

            .slide-item2 .progress {
                border-color: rgba(251, 146, 10, 1);

                .over3 {
                    background: linear-gradient(to right, rgba(251, 146, 10, 1), rgba(253, 207, 47, 1));
                }
            }

            .do-num {
                margin-left: 14px;
                width: 122px;
                font-size: 32px;

                .num {
                    line-height: 42px;
                    color: #49F2A2;
                    text-align: center;

                    span {
                        color: #fff;
                        font-size: 12px;
                    }
                }

                &:nth-child(2) {
                    .num {
                        color: #FCD45F;
                    }
                }

                .text {
                    height: 24px;
                    line-height: 24px;
                    font-size: 15px;
                    background: url('@/assets/images/bigScreen/tj-mine.png') no-repeat;
                    background-size: 100% auto;
                    text-align: center;
                }
            }
        }

        .custom-swiper-button-prev,
        .custom-swiper-button-next {
            position: absolute;
            top: 65%;
            transform: translateY(-50%);
            z-index: 10;
            color: #FFFFFF;
            font-size: 20px;
            width: 50px;
            height: 50px;
        }

        .custom-swiper-button-next {
            right: 0;
        }

        .custom-swiper-button-prev {
            left: 0;
        }
    }

    .columnar {
        width: 100%;
        height: 187px;
        margin-bottom: 20px;
    }

    .pie-box {
        padding: 20px 15px;
    }

    .pie {
        width: 195px;
        height: 195px;
    }

    .total-box {
        width: 100%;
        height: 355px;
        background: url('@/assets/images/bigScreen/total-circle.png') center -60px no-repeat;
        background-size: 536px auto;
        position: relative;

        .t-title {
            font-size: 24px;
        }

        .circle {
            width: 282px;
            height: 282px;
            background: url('@/assets/images/bigScreen/circle.png') center center no-repeat;
            background-size: 100% auto;
            position: absolute;
            top: 204px;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: spin 2s linear infinite;
        }

        .point {
            width: 320px;
            height: 42px;
            line-height: 42px;
            background: url('@/assets/images/bigScreen/line-bg.png') right center no-repeat;
            background-size: 100% auto;
            font-size: 14px;
            display: flex;
            position: absolute;
            font-weight: 500;

            .white {
                line-height: 50px;
            }

            span {
                font-size: 26px;
                margin: 0 8px 0 20px;
            }

            .pointImg {
                width: 20px;
                height: 20px;
                background: url('@/assets/images/bigScreen/point.png') no-repeat;
                background-size: 20px auto;
                position: absolute; // right: -33px;
                top: 11px;
            }

            .pointImg0 {
                right: -18px;
            }

            .pointImg1 {
                left: -1px;
            }

            .pointImg2 {
                right: -21px;
            }

            .pointImg4 {
                right: -12px;
            }

            .pointImg3 {
                left: -2px;
            }

            .pointImg5 {
                left: 6px;
            }
        }

        .point0 {
            top: 90px;
            left: 0;

            .point-title {
                margin-left: 100px;
            }
        }

        .point2 {
            top: 182px;
            left: -36px;

            .point-title {
                margin-left: 100px;
            }
        }

        .point4 {
            top: 274px;
            left: 0;

            .point-title {
                margin-left: 50px;
            }
        }

        .point1 {
            top: 90px;
            left: 566px;
            padding-left: 80px;
        }

        .point3 {
            top: 182px;
            left: 600px;
            padding-left: 60px;
        }

        .point5 {
            top: 274px;
            left: 566px;
            padding-left: 74px;
        }
    }

    .wave {
        width: 822px;
        height: 235px;
        margin: 0 auto;
    }

    .table-box {
        width: 461px;
        height: 229px;
        background-color: rgba(2, 21, 59);
        color: #fff;

        &:deep(.cell) {
            padding: 0;
        }

        &:deep(th) {
            height: 35px !important;
            padding: 0;
            background: rgba(6, 103, 235, 0.59) !important;
            color: #fff;

            &:hover {
                background: rgba(6, 103, 235, 0.59) !important;
            }
        }

        &:deep(tr) {
            background: rgba(2, 21, 59) !important;
        }

        &:deep(tbody tr) {
            height: 40px !important;
            background: transparent !important;

            &:hover {
                background: transparent !important;

                .el-table__cell {
                    background: transparent !important;
                }
            }

            .el-table__cell {
                border: none;
                padding: 0 !important;
            }

            td {
                &:hover {
                    background: transparent !important;
                }
            }

            &:nth-child(even) {
                height: 35px !important;
                border: 1px solid rgba(24, 107, 219, 1) !important;
                background: rgba(6, 103, 235, 0.2) !important;
                box-sizing: content-box;
            }
        }

        .el-table__cell,
        .cell {
            padding: 0;
        }

        .img {
            width: 14px;
            height: auto;
        }

        .status2 {
            width: 50px;
            margin: 0 auto;
            font-size: 12px;
            line-height: 16px;
            padding: 0 3px;
            background: rgba(252, 212, 95, 0.21);
            border: 1px solid rgba(252, 212, 95, 1);
            border-radius: 8px;
            color: rgba(252, 212, 95, 1);
        }

        .status1 {
            width: 50px;
            margin: 0 auto;
            font-size: 12px;
            line-height: 16px;
            padding: 0 3px;
            background: rgba(73, 242, 162, 0.21);
            border: 1px solid rgba(73, 242, 162, 1);
            border-radius: 8px;
            color: rgba(73, 242, 162, 1)
        }
    }

    .right .f-title {
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: url('@/assets/images/bigScreen/cr-bg.png') 12px center no-repeat;
        background-size: 450px auto;
        padding-left: 73px;
        margin-bottom: 9px;
        padding-right: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .des {
            line-height: 27px;
            height: 27px;
            padding: 0 12px;
            border-radius: 13px;
            background-color: rgba(255, 83, 65, 0.21);
            border: 1px solid rgba(253, 200, 89, 1);
            color: #FCD45F;
        }
    }

    .content {
        width: 100%;
        margin-top: 30px;

        .left {
            width: 518px;

            .title {
                height: 52px;
                background: url('@/assets/images/bigScreen/collect.png') no-repeat;
                background-size: cover;
                padding-left: 70px;
                font-size: 24px;
                font-weight: bold;
            }

            .title1 {
                background: url('@/assets/images/bigScreen/tongji.png') no-repeat;
                background-size: contain;
            }

            .title2 {
                height: 50px;
                background: url('@/assets/images/bigScreen/xianshangxianxia.png') no-repeat;
                background-size: contain;
            }

            .today-fx-num {
                justify-content: space-between;
                margin: 15px 0 15px;

                .li {
                    flex: 1;
                    background: url('@/assets/images/bigScreen/icon2-1.png') no-repeat;
                    background-size: 100% auto;
                    padding: 4px 0 10px 84px;

                    .f-title {
                        font-size: 14px;
                        line-height: 20px;
                    }

                    .des {
                        line-height: 30px;
                        color: #12FFFC;
                        font-size: 20px;
                    }

                    &:first-child {
                        margin-right: 20px;
                    }
                }
            }

            .circle-yuan2 {
                width: 50px;
                height: 50px;
                background: url('@/assets/images/bigScreen/icon-circle2.png') left center no-repeat;
                background-size: 100% auto;
                border-radius: 50%;
                position: relative;
                left: -70px;
                top: 0;
                animation: rotateYuan 2s linear infinite;
            }
        }

        .circle-yuan {
            width: 52px;
            height: 52px;
            background: url('@/assets/images/bigScreen/icon-circle.png') left center no-repeat;
            background-size: 100% auto;
            border-radius: 50%;
            position: relative;
            left: -70px;
            top: 0;
            animation: rotateYuan 2s linear infinite;
        }

        .center {
            flex: 1;
            margin-top: 10px;

            .t-title {
                height: 38px;
                text-align: center;
                background: url('@/assets/images/bigScreen/titlebg-middle.png') center center no-repeat;
                background-size: contain;
                font-size: 20px;
                font-weight: 800;
            }

            .t-title1 {
                background: url('@/assets/images/bigScreen/middle-title1.jpg') center center no-repeat;
                background-size: contain;
            }

            .t-title2 {
                background: url('@/assets/images/bigScreen/middle-title2.jpg') center center no-repeat;
                background-size: contain;
            }

            .wave-box {
                width: 100%;
            }
        }

        .right {
            width: 462px;

            .title {
                height: 52px;
                line-height: 52px;
                padding-left: 70px;
                font-size: 24px;
                font-weight: bold;
                background: url('@/assets/images/bigScreen/dingdan.png') center center no-repeat;
                background-size: contain;
            }

            .s-title {
                line-height: 28px;
                background: url('@/assets/images/bigScreen/level-bg.png') no-repeat;
                background-size: cover;
                padding-left: 30px;
                font-size: 18px;
                margin-top: 11px;
                margin-bottom: 11px;
            }
        }
    }
}

//柱状图
:deep(.bar-tooltip) {
    background-color: rgba(1, 9, 28, 0.7) !important;
    background-image: -webkit-linear-gradient(#0286ff, #00feff);
    border-radius: 5px !important;
    color: #fff;
    box-sizing: border-box;
    border: none !important;
    position: absolute;
    padding: 1px !important;
    z-index: -100;

    .tooltip-shadow {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background-color: rgba(1, 9, 28, 0.85);
        padding: 12px;
    }

    .formatter {
        line-height: 25px;
        font-family: "Barlow Condensed";

        i {
            line-height: 20px;
            display: inline-block;
        }

        span {
            font-size: 19px;
            font-weight: bold;
        }

        &:nth-child(1) {
            span {
                color: #12FFFC;
            }
        }

        &:nth-child(2) {
            span {
                color: #31FFBE;
            }
        }

        &:nth-child(3) {
            span {
                color: rgba(254, 186, 87, 1)
            }
        }
    }
}

.pie-legend {
    flex: 1;
    padding-bottom: 15px;

    ul {
        width: 80%;
        padding: 6px 0 0 15px;

        li {
            width: 100%;
            margin-bottom: 18px;

            .p-title {
                line-height: 25px;
                font-size: 18px;
                color: #FFF;
                align-items: center;
                margin-bottom: 2px;

                i {
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                    margin-right: 12px;
                }
            }

            .p-num {
                width: 100%;
                line-height: 28px;
                border-radius: 5px;
                background-image: linear-gradient(to right, rgba(46, 141, 253, 0.3), rgba(46, 141, 253, 0));
                display: flex;

                .font-num {
                    font-size: 20px;
                }

                span {
                    flex: 1;
                    text-align: center;
                    color: #fff;

                    em {
                        font-size: 12px;
                        margin-right: 3px;
                        color: #FCD45F
                    }

                    .color0 {
                        color: #12FFFC;
                    }
                }
            }

            .num {
                font-size: 18px;
                color: #12FFFC;
                margin-right: 14px;
            }

            .percentage {
                font-size: 18px;
                color: #FFF;
            }
        }
    }
}

.table-box .el-table__header-wrapper th,
.table-box .el-table__fixed-header-wrapper th {
    height: 35px !important;
}

.f-fx-bt {
    align-items: end;
}

.green {
    color: #30FFF8;
}

.white {
    color: #fff;
    font-size: 13px;
}

.yellow {
    color: #FCD45F;
}
</style>

<style>
.my-custom-table {
    --el-table-border-color: transparent;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

#svg-box {
    /* padding:12px 11px 20px 24px; */
}

.svg-slide {
    width: 100%;
    fill: none;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #fff;
    stroke-dasharray: 100, 2121;
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    0% {
        stroke-dashoffset: 2121;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes rotateHeader {
    0% {
        stroke-dashoffset: 1962;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes progress-scroll {
    to {
        background-position: 16px 0;
    }
}

.f-pr {
    position: relative;
}

.bg2 {
    position: absolute;
    left: 26px;
    width: 42px;
    height: 53px;
    background-image: url("@/assets/images/bigScreen/classify-bg2.png");
    background-size: 100%;
    background-position: center;
    animation: animate 10s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 10%;
    }
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes ani-show {
    0% {
        background-size: 0, 0, 0;
    }

    33% {
        background-size: 0, 0, 22px;
    }

    66% {
        background-size: 0, 20px, 22px;
    }

    100% {
        background-size: 15px, 20px, 22px;
    }
}

@keyframes ani-show2 {
    0% {
        background-size: 0, 0, 0;
    }

    33% {
        background-size: 0, 0, 22px;
    }

    66% {
        background-size: 0, 20px, 22px;
    }

    100% {
        background-size: 15px, 20px, 22px;
    }
}

/* 动画效果 */

@keyframes rotateYuan {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>